<template>
	<view class="page-container">
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order.payResult }}</view>
				<view></view>
			</view>
		</view>
		
		<mescroll-body height="calc(100vh - 98rpx - var(--status-bar-height))" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view>
				<view class="u-p-t-20 u-text-center bg-white" style="height: 324rpx;">
					<image :src="require(`@/static/image/common/${ payStatus }.png`)" style="width: 116rpx; height: 140rpx"></image>
					
					<view v-if="payStatus === 'success'">
						<view class="flex-center-center u-p-t-14">
							<view class="u-lh-34 flex-baseline font-bold">
								<view class="u-m-r-35 u-f-40 u-lh-34 font-bold color-red">
									<template v-if="dataInfo.payType === 1">
										{{ dataInfo.totalPayIntegral || 0 }}{{ lang_common.score }}
									</template>
									<view v-else class="flex-baseline">
										<view class="u-f-32">{{ lang_unit.money }}</view>
										<view class="u-f-52">{{ dataInfo.totalPayAmount || 0 }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="u-p-t-14 u-f-32 u-lh-44 color-grew">{{ lang_order.payOrderSuccess }}</view>
					</view>
					
					<view v-else>
						<view class="u-f-36 u-lh-50 font-bold">{{ lang_order.payOrderFailure }}</view>
						<view class="u-p-t-14 u-f-32 u-lh-44 color-grew">{{ lang_order.payOrderFailureTips }}</view>
					</view>
				</view>
				
				<view class="u-p-t-54 flex-center-center">
					<x-common-btn @click="redirectTo">
						<view>{{ lang_order.watchOrder }}</view>
					</x-common-btn>
				</view>
				
				<view class="u-p-t-24 flex-center-center">
					<x-common-btn
					background="#FFFFFF"
					color="#333333"
					borderColor="#E3E3E3" @click="changeAction">
						<view>{{ lang_order[payStatus === 'success' ? 'returnIndex' : 'rePayOrder'] }}</view>
					</x-common-btn>
				</view>
			</view>
		</mescroll-body>
		
		<x-pay-select v-model="selectVisible" :info="dataInfo" @change="changeSelect"></x-pay-select>
	</view>
</template>

<script>
	import { payAction } from '@/utils/pay.js'
	import { orderInfo } from '@/api/user/order.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				payStatus: 'success',
				dataInfo: {},
				orderNumber: '',
				
				selectVisible: false
			}
		},
		onLoad({ type, orderNumber }) {
			this.payStatus = type || 'success'
			this.orderNumber = orderNumber
		},
		methods: {
			changeAction() {
				if (this.payStatus === 'success') {
					uni.switchTab({
						url: '/pages/tabbar/user/index/index'
					})
				} else {
					this.selectVisible = true
				}
			},
			changeSelect(type) {
				payAction(type, this.orderNumber)
			},
			redirectTo() {
				uni.redirectTo({
					url: `/pages/user/order/detail/detail?orderNumber=${ this.orderNumber }`
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				if (page.num !== 1) {
					node && node.mescroll.endSuccess(10);
					return
				}
				orderInfo({
					orderNumber: this.orderNumber
				}).then(result => {
					node && node.mescroll.endSuccess(10);
					this.dataInfo = result
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>
